<template>
	<view class="discuss">
		<u-form :model="form" ref="uForm">
			<u-upload 
				:action="action" 
				max-count="9" 
				@on-success="onSuccess" 
				:file-list="fileList" 
				:max-size="3 * 1024 * 1024"
				multiple 
				:deletable="false"
				:show-progress="false"
			></u-upload>
			<u-form-item prop="dTitle">
				<u-input class="title" v-model="form.dTitle" placeholder="请输入标题"/>
			</u-form-item>
			<u-form-item label="类型">
				<u-checkbox-group>
					<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item>
				<u-input v-model="form.dContent" :maxlength="600" :clearable="false" type="textarea" :border="true" :auto-height="true" />
			</u-form-item>
		</u-form>
		<view class="btn-view">
			<u-button :type="btnType" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() 
		{
			return {
				action: 'http://localhost:8881/discuss/view/arrupload',
				fileList:[],
				form: {
					//标题
					dTitle: '',
					//内容
					dContent: '',
					dPicture: '',
					dUid:'',
					dFavorite:0,
					dDislike:0
				},
				viewFileList:[],
				rules:{
					dTitle:[
						{
							max: 15,
							message: '超过15个字了喂',
							trigger: 'change'
						}
					]
				},
				radio: '',
				switchVal: false,
				sum:0,
				checkboxList: [
					{
						name: '肉类',
						checked: false,
						disabled: false
					},
					{
						name: '蔬菜',
						checked: false,
						disabled: false
					},
					{
						name: '酸',
						checked: false,
						disabled: false
					},
					{
						name: '甜',
						checked: false,
						disabled: false
					},
					{
						name: '辣',
						checked: false,
						disabled: false
					},
					{
						name: '炒',
						checked: false,
						disabled: false
					},
					{
						name: '煎',
						checked: false,
						disabled: false
					}
				],
				btnType:'warning',
				btn:{
					ok:'primary',
					no:'warning'
				}
			}
		},
		watch:
		{
			form: {
				handler(newValue, oldValue)
				{
					if(newValue.dTitle !== '' && 
					newValue.dContent !== '' &&
					this.viewFileList.length > 0
					)
					{
						this.btnType = this.btn.ok
					}
					else
					{
						this.btnType = this.btn.no
					}
				},
				deep:true
			}
		},
		methods: {
			submit() 
			{
				this.save()
			},
			onSuccess(data, index, lists, name)
			{
				this.viewFileList.push(data)
			},
			async save()
			{
				this.form.dUid = this.vuex_token.openid
				this.form.dPicture = this.viewFileList.toString()
				let res = await this.$u.api.intUpdDiscuss(this.form)
				console.log(res)
			}
		},
		onReady()
		{
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss">
	.discuss
	{
		padding: 20px 20px;
		.title
		{
			display: block;
			padding: 0 20rpx;
		}
	}
</style>
